<template>
  <el-scrollbar height="100%" ref="scrollbarRef">
    <div class="drawer-content">
      <el-segmented
        v-model="segmentedValue"
        :options="segmentedOptions"
        block
        @change="handleChangeSegmented"
      />
      <component :is="component" class="segmented-cotnent"></component>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import PreferencesAppearance from '../appearance/index.vue'
import PreferencesLayout from '../layout/index.vue'
import PreferencesShortcutKey from '../shortcut-key/index.vue'
import PreferencesGeneral from '../general/index.vue'
import type { ScrollbarInstance } from 'element-plus'
import { computed, markRaw } from 'vue'
import { ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const segmentedValue = ref('appearance')

const segmentedOptions = computed(() => {
  return [
    {
      label: t('preferences.appearance'),
      value: 'appearance',
      component: markRaw(PreferencesAppearance)
    },
    {
      label: t('preferences.layout'),
      value: 'layout',
      component: markRaw(PreferencesLayout)
    },
    {
      label: t('preferences.shortcuts'),
      value: 'shortcuts',
      component: markRaw(PreferencesShortcutKey)
    },
    {
      label: t('preferences.general'),
      value: 'preferences',
      component: markRaw(PreferencesGeneral)
    }
  ]
})

const component = computed(() => {
  return segmentedOptions.value.find(
    (item) => item.value === segmentedValue.value
  )?.component
})

const scrollbarRef = useTemplateRef<ScrollbarInstance>('scrollbarRef')
const handleChangeSegmented = () => {
  scrollbarRef.value?.setScrollTop(0)
}

defineOptions({
  name: 'CorePreferencesDrawerContent'
})
</script>

<style scoped lang="scss">
:deep(.drawer-content) {
  padding: 18px;

  .segmented-cotnent {
    margin-top: 8px;

    .container-item {
      padding: 16px 0;
    }

    h3 {
      padding-bottom: 8px;
    }
  }

  .toggle-container {
    --core-toggle-input-width: 165px;

    .toggle-item {
      height: 40px;
      padding: 0 8px;
      margin: 4px 0;
      font-size: 14px;
      border-radius: 6px;

      &:hover {
        background-color: var(--core-bg-color-04);
      }

      &.disabled {
        pointer-events: none;
        opacity: 0.5;
      }

      .el-select {
        --el-select-width: var(--core-toggle-input-width);
      }

      .el-input,
      .el-input-number {
        width: var(--core-toggle-input-width);
      }

      .tips {
        margin-right: 8px;
        font-size: 12px;
        color: var(--core-text-color-06);
      }
    }
  }

  .svg-icon-tips {
    .core-svg-icon {
      margin-left: 4px;
      font-size: 12px;
      cursor: help;
    }
  }

  .outline {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    outline: 1px solid var(--core-border-color-02);

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      pointer-events: none;
      content: ' ';
      border-radius: inherit;
      outline: 2px solid rgb(var(--core-primary-color));
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover:not(.is-active)::after {
      width: 100%;
      height: 100%;
      opacity: 1;
    }

    &.is-active {
      outline: 2px solid rgb(var(--core-primary-color));
    }
  }
}
</style>
